$(function () {
    // alert(11);
    // 1. 按下回车 把完整数据 存储到本地存储里面
    // 存储的数据格式  var todolist = [{title: "xxx", done: false}]
    // 自动加载页面数据
    load();
    $("#title").on("keydown", function (event) {
        if (event.keyCode === 13) {
           if($(this).val()===""){
            alert("输入内容不能为空！")
           }
           else{
             // 先读取本地存储原来的数据
             var local = getDate();
             // console.log(local);
             // 把local数组进行更新数据 把最新的数据追加给local数组
             local.push({
                 title: $(this).val(),
                 done: false,
             })
             // 把这个数组local 存储给本地存储
             saveDate(local);
             // 2. toDoList 本地存储数据渲染加载到页面
             load();
             $(this).val("")
           }
        }

    });

    // 3. toDoList 删除操作
    $("ol,ul").on("click", "a", function () {
        // alert(11);
        // 先获取本地存储
        var data = getDate();
        console.log(data);
        // 修改数据
        // 设置或获取元素自定义属性值 attr() attr("属性") // 类似原生 getAttribute()
        var index = $(this).attr("id");
        console.log(index);
        data.splice(index, 1)
        // 保存到本地存储
        saveDate(data);
        // 重新渲染页面
        load()
    })

    // 4. toDoList 正在进行和已完成选项操作
    $("ol,ul").on("click", "input", function () {
        // alert(11);
        // 先获取本地存储的数据
        var data = getDate();
        console.log(data);
        // 修改数据
        // 不用再去定义一个属性，直接获取兄弟a 自定义属性id 即可
        var index = $(this).siblings("a").attr("id");
        console.log(index);
        // data[?].done=?
        // 当前复选框里面 的done 修改为复选框的选定状态 就是done 随着input 的checked的属性变化而变化
        data[index].done = $(this).prop("checked");
        console.log(data);
        // 保存到本地存储
        saveDate(data);
        // 重新渲染页面
        load()
    })



    // 读取本地存储的数据 
    function getDate() {
        // 获取todolist 
        var data = localStorage.getItem("todolist");
        if (data != null) { //todolist数据不为空 有数据存在
            // 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
            return JSON.parse(data);
        } else { //没有数据就返回空
            // 空的数组对象
            return [];
        }
    }
    // 保存本地存储数据
    function saveDate(data) {
        //对象转换为字符串，存储在本地内存中
        localStorage.setItem("todolist", JSON.stringify(data))
    }

    // 渲染加载数据
    function load() {
        // 读取本地存储的数据
        var data = getDate();
        console.log(data);
        // 遍历之前先要清空ol里面的元素内容
        $("ol,ul").empty();
        //5. toDoList 统计正在进行个数和已经完成个数
        //声明2个变量 
        var todoCount = 0; // 正在进行的个数
        var doneCount = 0; // 已经完成的个数
        // 遍历这个数据
        $.each(data, function (i, n) {
            // console.log(n);
            // 追加生成li
            // 已经完成的 true
            if (n.done) {
                // 外双"" 内'' 添加数据 "<p> "+数据 +" </p>"
                $("ul").prepend("<li><input type='checkbox' checked='checked'><p>" + n.title + "</p> <a href='javascript:;' id=" + i + "></a></li>")
                doneCount++
            } else { //未完成的 false
                $("ol").prepend("<li><input type='checkbox' ><p>" + n.title + "</p> <a href='javascript:;' id=" + i + "></a></li>")
                todoCount++
            }
        });
        // 普通元素文本内容text() (相当与原生 innerText**)**
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);

    }

})